<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        .box {
            width: 500px;
            height: 200px;
            box-sizing: border-box;
            border: 1px solid rebeccapurple;
        }
        
        .box * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        .header {
            height: 20%;
            width: 100%;
            border: 1px solid saddlebrown;
        }
        
        .header>div {
            float: left;
            margin-left: 10px;
            line-height: 39px;
            width: 70px;
            text-align: center;
        }
        
        .header>div:hover {
            background: cornflowerblue;
        }
        
        .main {
            width: 100%;
            height: 80%;
            float: left;
        }
        
        .main>div {
            float: left;
        }
        
        .aside {
            width: 30%;
            height: 100%;
            border: 1px solid saddlebrown;
        }
        
        .blog-title {
            height: 30%;
        }
        
        .text {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
        }
        
        .article {
            float: left;
            width: 70%;
            height: 100%;
            border: 1px solid saddlebrown;
        }
        
        .onthis {
            background: cadetblue;
        }
    </style>
</head>

<body>
    <!-- 不要直接使用 this 关键字作为属性、 变量名，否则会直接指向 Vue -->
    <div id="app">
        <my-component v-bind:myclick="myclick" v-bind:search="search" v-bind:onclick="onclick" v-bind:index="index" v-bind:titles="titles" v-bind:content="content" v-bind:class="onthis"></my-component>
    </div>


    <script>
        let component = {
            props: ["myclick", "search", "onclick", "onthis", "index", "titles", "content"],
            template: `
            <div class="box">
                <div class="header">
                    <div class="head-article">文章</div>
                    <div class="head-news">新闻</div>
                </div>
                <div class="main">
                    <div class="aside">
                        <div class="blog-title" v-for="title of titles" v-bind:title="title" v-bind:key="title" >
                            <div class="article-title" @click="myclick();search(title)">{{title}}</div>
                        </div>   
                    </div>
                    <div  class="article" v-if="onclick">
                        <div class="text">{{content[index]}}</div>
                    </div>
                    <div class="article" v-else>
                        <div class="text">Click blog title</div>
                    </div>
                </div>
            </div>
            `
        };

        new Vue({
            el: "#app",
            data: {
                titles: ["no.1", "top2", "fix"],
                content: ["aaaaaaaa", "bbbbbb", "ccccccc"],
                onclick: false,
                index: 0
            },
            components: {
                "my-component": component
            },
            methods: {
                myclick() {
                    this.onclick = true;
                },
                search(title) {
                    let i = 0;
                    for (let content of this.titles) {
                        if (content == title) {
                            this.index = i;
                        }
                        i++;
                    }
                }
            }
        })
    </script>

</body>

</html>